<template>
  <view>
    <u-tabbar :active="useStore.activeTab" @change="tabChange" :fixed="true" :placeholder="true"
      :safeAreaInsetBottom="true">
      <u-tabbar-item v-for="(item, index) in tabbarItems" :key="index" :icon="getTabbarIcon(item, index)"
        :text="item.text" @click="handleTabbarItemClick(item, index)"></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script setup>
//引入pinia仓库
import useUserStore from '@/store/user'
let useStore = useUserStore()

const tabbarItems = [
  {
    pagePath: '/pages/home/home',
    text: '首页',
    iconPath: '/static/images/tabBar/home/home.png',
    selectedIconPath: '/static/images/tabBar/home/home-active.png'
  },
  {
    pagePath: '/pages/my/my',
    text: '未开放',
    iconPath: '/static/images/tabBar/user/user.png',
    selectedIconPath: '/static/images/tabBar/user/user-active.png'
  },
]

const tabChange = (index) => {
  useStore.activeTab = index
  console.log('切换tab', useStore.activeTab);
  console.log('切换tab-----------', tabbarItems[index]);

  const path = tabbarItems[index].pagePath

  uni.switchTab({
    url: path  // 使用 uni.switchTab 来跳转到 tab 页
  });
}
//点击tabbar按钮
const handleTabbarItemClick = (item, index) => {
  if (useStore.activeTab === index) {
    useStore.setActive(index)
    const path = item.pagePath
    uni.switchTab({
      url: path
    })
  }
  // if (useStore.activeTab !== index) {
  //   //如果点击的是扫描按钮
  //   if (index === 1) {
  //   // console.log(item);
  //   } else {
  //     useStore.setActive(index)
  //     const path = item.pagePath
  //     uni.switchTab({
  //       url: path
  //     })
  //   }
  // }
}
//图标的切换
const getTabbarIcon = (item, index) => {
  return useStore.activeTab === index ? item.selectedIconPath : item.iconPath
}
</script>


<!-- <template>
  <u-tabbar :value="selectedTab" @change="tabChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
    <u-tabbar-item v-for="(item, index) in tabbarItems" :key="index" :text="item.text"
      :icon="getTabbarIcon(item, index)" @click="tabClick(index)"></u-tabbar-item>
  </u-tabbar>
</template>

<script setup lang="ts">
import { nextTick, ref, watch } from 'vue';

const selectedTab = ref<number>(0)

const tabbarItems = [
  {
    pagePath: '/pages/home/home',
    text: '首页',
    iconPath: '/static/images/tabBar/home/home.png',
    selectedIconPath: '/static/images/tabBar/home/home-active.png'
  },
  {
    pagePath: '/pages/my/my',
    text: '我的',
    iconPath: '/static/images/tabBar/user/user.png',
    selectedIconPath: '/static/images/tabBar/user/user-active.png'
  },
]

// const switchToTab = (index: number) => {
//   selectedTab.value = index
//   console.log('切换tab', tabbarItems);
//   console.log('切换tab-----------', tabbarItems[index]);

//   const routePath = tabbarItems[index].pagePath

//   uni.switchTab({
//     url: routePath  // 使用 uni.switchTab 来跳转到 tab 页
//   });
// }
const switchToTab = async (index: number) => {
  // 更新 selectedTab 状态
  selectedTab.value = index;

  // 等待 DOM 更新
  await nextTick();

  // 获取 tab 对应的页面路径
  const routePath = tabbarItems[index].pagePath;

  // 跳转到对应页面
  uni.switchTab({
    url: routePath,
  });
}

const tabChange = (value: number) => {
  switchToTab(value)
}

const tabClick = (value: number) => {
  switchToTab(value)
}

//图标的切换
const getTabbarIcon = (item: any, index: number) => {
  return selectedTab.value === index ? item.selectedIconPath : item.iconPath
}

// const tabIndex = ref(0);

// const change = (item: any, index: number) => {
//   console.log(index, "索引", item, "item.....");

//   tabIndex.value = index
//   console.log("调用父组件的tab切换", index);
//   if (index == 0) {
//     uni.switchTab({
//       url: '/pages/home/index'
//     })
//   } else if (index == 1) {
//     uni.switchTab({
//       url: '/pages/my/my'
//     })
//   }
// };

// 点击中间凸出来的tab
// const tabMiddle = function () {
//   console.log("点击中间的tab");
// }


</script>

<style lang="scss">
.tabars {
  width: 90rpx;
  height: 70rpx;
  display: flex;
  flex-direction: column;
  align-content: center;
  position: relative;
  bottom: 50rpx;
  border-radius: 50%;
  background-color: #fff;
  border-top: 2px solid #dadbde;
  padding: 30rpx;

  .item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;

    .img {
      width: 80%;
    }
  }
}
</style> -->